Custom Tooltip, Labels, এবং Legends যোগ করা

Highcharts-এর মাধ্যমে আপনি ইন্টারঅ্যাকটিভ এবং কাস্টমাইজড চার্ট তৈরি করতে পারেন, যেখানে Tooltip, Labels, এবং Legends কাস্টমাইজ করে আপনার চার্টের ইউজার এক্সপেরিয়েন্সকে আরও উন্নত করা যায়। GWT (Google Web Toolkit) ব্যবহার করে Highcharts-এর এই বৈশিষ্ট্যগুলো যোগ করা সম্ভব, যা আপনাকে ডেটার উপর আরও বিস্তারিত তথ্য প্রদর্শন করতে এবং আপনার চার্টের চেহারা আরও উন্নত করতে সহায়তা করে।

১. Custom Tooltip (কাস্টম টুলটিপ)

Highcharts-এ আপনি টুলটিপ কাস্টমাইজ করে ব্যবহারকারীদের জন্য আরো বিস্তারিত এবং স্বতন্ত্র তথ্য প্রদর্শন করতে পারেন। নিচে একটি উদাহরণ দেখানো হলো যেখানে কাস্টম টুলটিপ কনফিগারেশন যোগ করা হয়েছে:

tooltip: {
    headerFormat: '<b>{point.key}</b><br>',
    pointFormat: 'Value: {point.y}<br>Percentage: {point.percentage}%',
    valueDecimals: 2,
    backgroundColor: 'rgba(255, 255, 255, 0.9)',  // টুলটিপের ব্যাকগ্রাউন্ড রঙ
    borderColor: '#000',  // টুলটিপের বর্ডারের রঙ
    borderRadius: 5,  // টুলটিপের কোণার রেডিয়াস
    style: {
        color: '#333',  // টুলটিপের টেক্সট রঙ
        fontSize: '14px'  // টুলটিপের ফন্ট সাইজ
    }
}

এখানে:

• headerFormat: টুলটিপের হেডার কাস্টমাইজ করে।
• pointFormat: ডেটা পয়েন্টের বিস্তারিত কাস্টমাইজেশন।
• valueDecimals: দশমিকের পর সংখ্যা নির্ধারণ।
• backgroundColor: টুলটিপের ব্যাকগ্রাউন্ড রঙ।
• borderColor: টুলটিপের বর্ডার রঙ।
• borderRadius: টুলটিপের কোণার রেডিয়াস।
• style: টুলটিপের টেক্সটের স্টাইল কাস্টমাইজ করা।

২. Custom Labels (কাস্টম লেবেলস)

Highcharts-এ অক্ষ (axis) বা সিরিজের জন্য কাস্টম লেবেল যোগ করা যায়, যাতে প্রতিটি ডেটা পয়েন্টের মান বা এক্সট্রা তথ্য প্রদর্শিত হয়। নিচে একটি উদাহরণ দেয়া হলো যেখানে কাস্টম লেবেল যোগ করা হয়েছে:

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    labels: {
        style: {
            color: '#ff0000',  // লেবেলের টেক্সট রঙ
            fontSize: '16px',  // লেবেলের ফন্ট সাইজ
            fontWeight: 'bold'  // লেবেলের ফন্ট ওজন
        },
        formatter: function() {
            return this.value + ' (Month)';  // কাস্টম ফরম্যাটিং
        }
    }
},
yAxis: {
    title: {
        text: 'Values'
    },
    labels: {
        formatter: function() {
            return '$' + this.value;  // কাস্টম ফরম্যাটিং: মানের সাথে সাইন যোগ করা
        }
    }
}

এখানে:

• xAxis.labels: অনুভূমিক অক্ষের লেবেল কাস্টমাইজ করা হয়েছে, যেমন টেক্সট রঙ, সাইজ, এবং ফরম্যাট।
• yAxis.labels: উল্লম্ব অক্ষের লেবেল কাস্টমাইজ করা হয়েছে, যেখানে মানের সাথে ডলার সাইন যোগ করা হয়েছে।

৩. Custom Legends (কাস্টম লেজেন্ড)

Highcharts-এ আপনি লেজেন্ড কাস্টমাইজ করতে পারেন, যাতে সিরিজের নাম এবং তথ্য আরও সুন্দরভাবে প্রদর্শিত হয়। লেজেন্ডের জন্য আপনি রঙ, স্টাইল এবং পজিশন কাস্টমাইজ করতে পারেন। নিচে একটি উদাহরণ দেয়া হলো:

legend: {
    enabled: true,  // লেজেন্ড সক্রিয় করা
    layout: 'horizontal',  // লেজেন্ডের লেআউট (horizontal/vertical)
    align: 'center',  // লেজেন্ডের সেন্টারিং
    verticalAlign: 'bottom',  // লেজেন্ডের উল্লম্ব অবস্থান
    borderWidth: 1,  // লেজেন্ডের বর্ডার
    borderColor: '#ccc',  // লেজেন্ডের বর্ডারের রঙ
    backgroundColor: '#f4f4f4',  // লেজেন্ডের ব্যাকগ্রাউন্ড রঙ
    itemStyle: {
        color: '#333',  // লেজেন্ডের আইটেমের টেক্সট রঙ
        fontWeight: 'bold',  // আইটেমের ফন্ট ওজন
        fontSize: '14px'  // আইটেমের ফন্ট সাইজ
    }
}

এখানে:

• enabled: লেজেন্ড সক্রিয় বা নিষ্ক্রিয় করা।
• layout: লেজেন্ডের লেআউট নির্বাচন করা (horizontal/vertical)।
• align: লেজেন্ডের অনুভূমিক অবস্থান।
• verticalAlign: লেজেন্ডের উল্লম্ব অবস্থান।
• borderWidth এবং borderColor: লেজেন্ডের বর্ডার কাস্টমাইজ করা।
• backgroundColor: লেজেন্ডের ব্যাকগ্রাউন্ড রঙ।
• itemStyle: লেজেন্ডের টেক্সটের স্টাইল কাস্টমাইজ করা।

GWT কোডে Highcharts-এ Custom Tooltip, Labels, এবং Legends ইন্টিগ্রেট করা

GWT ক্লাসের মধ্যে Highcharts এর কাস্টম টুলটিপ, লেবেল এবং লেজেন্ড ইন্টিগ্রেট করার জন্য আপনাকে JSNI (JavaScript Native Interface) ব্যবহার করতে হবে।

public static native void createCustomHighChart(String containerId, JsArrayString categories, JsArrayString data) /*-{
    $wnd.Highcharts.chart(containerId, {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Sales Over Time'
        },
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: 'Sales: {point.y}',
            valueDecimals: 2,
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            borderColor: '#000',
            borderRadius: 5,
            style: {
                color: '#333',
                fontSize: '14px'
            }
        },
        xAxis: {
            categories: categories,
            labels: {
                style: {
                    color: '#ff0000',
                    fontSize: '16px',
                    fontWeight: 'bold'
                },
                formatter: function() {
                    return this.value + ' (Month)';
                }
            }
        },
        yAxis: {
            title: {
                text: 'Sales'
            },
            labels: {
                formatter: function() {
                    return '$' + this.value;
                }
            }
        },
        series: [{
            name: 'Sales Data',
            data: data
        }],
        legend: {
            enabled: true,
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'bottom',
            borderWidth: 1,
            borderColor: '#ccc',
            backgroundColor: '#f4f4f4',
            itemStyle: {
                color: '#333',
                fontWeight: 'bold',
                fontSize: '14px'
            }
        }
    });
}-*/;

সারাংশ

Highcharts-এ Custom Tooltip, Labels, এবং Legends যোগ করা আপনার চার্টকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী বান্ধব করে তোলে। GWT ব্যবহার করে আপনি Java কোডের মাধ্যমে সহজেই এই কাস্টমাইজেশনগুলো করতে পারেন। এর ফলে আপনার ওয়েব অ্যাপ্লিকেশন আরও সুন্দর এবং কার্যকরী হবে, যা ব্যবহারকারীদের জন্য আরও উপভোগ্য হবে।